<script src="./codelogin.component.js"></script>
<style src="./codelogin.css" scoped></style>
<template>
	<view class="content padding-xl">
	
		<view class="text-center padding-tb-xl">
			<image :src="'/static/logos.png'" class='logo'></image>
		</view>
		
		<view class="input-group">
			<view class="input-row solid-bottom">
				<m-input class="m-input" type="number" clearable v-model="username" placeholder="请输入手机号"></m-input>
			</view>
			<view class="input-row solid-bottom flex justify-between align-center margin-top-sm">
				<m-input class="m-input" type="number"  v-model="code" placeholder="请输入验证码"></m-input>
				<view v-if="showText==true" class="text-red" @click="getCode">获取验证码</view>
				<view v-else class="text-gray">{{second}}s重新发送</view>
			</view>
			
		</view>
		<view class="btn-row margin-top-xl">
			<button type="primary" class="primary bg-red" @tap="mbindLogin">登录</button>
		</view>
		
	
	</view>
</template>
<script>
	import mInput from '../../components/m-input.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		components: {
			mInput
		},
		data() {
			return {
				username: '',
				code: '',
				second:120,
				showText:true
			}
		},
		computed:{
			...mapState(['hasLogin']),
		},
		methods: {
			getCode(){
				var tell = this.tell;
				var res11 = tell.test(this.username);
				if(res11==false){
					uni.showToast({
						icon: 'none',
						title: '手机号码填写有误'
					}); 
					return false;  
				}
				uni.request({
					url: `${this.$serverUrl}/isalary/login/send/smsCode`,
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
					},
					data: {
						phone: this.username
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: res.data.msg
							});
							/*验证码倒计时效果*/
							this.showText = false
							var interval = setInterval(() => {
								let times = --this.second
								this.second = times<10?'0'+times:times //小于10秒补 0
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								this.second=60
								this.showText = true
							}, 60000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					fail:function(e){
					}
				})
			},
			mbindLogin() {
				var tell = this.tell;
				var res1 = tell.test(this.username); 
				if(res1==false){
					uni.showToast({
						icon: 'none',
						title: '手机号码填写有误'
					}); 
					return false;  
				}
				
				if (this.code.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码最短为 6 个字符'
					});
					return;
				}
				let _self = this;
				uni.request({
					url: this.$serverUrl+'/isalary/login/byPhone',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', 
					},
					data: {
						phone: this.username,
						authCode: this.code,
						authId: uni.getStorageSync('authId')
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: '登录成功'
							});
							//alert(res.data.data);
							this.login(res.data.data);
							this.setToken(res.data.data);
							//uni.navigateBack();
							this.auditSubscriptionsSetting();
							
						} else {
							 /* uni.showModal({
								content: res.data.msg
							}) */
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}

					},
					fail:function(e){
						
					}
				})
			},
			// 判断是否授权微信订阅消息
			auditSubscriptionsSetting() {
			      let that = this
			      const tmplId = '1mCqh4nH56ivmrwVwqOGVKqB7wlNHVmkJwduikjEWtU'
			      uni.getSetting({
			        withSubscriptions: true,
			        success(res) {
			          console.log(res)
			          if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
			            if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
			              let item = res.subscriptionsSetting.itemSettings[tmplId]
			              if (item == 'reject') {
			                console.log('提示：用户拒绝订阅消息')
			                that.dingyueComfirm(tmplId)
			              } else if (item == 'accept') {
			                console.log('提示：您已经开启订阅消息')
							setTimeout(()=>{
								uni.reLaunch({
									url: '../home/home',
								});
							}, 200)
			              } else if (item == 'ban') {
			                console.log('提示：您已经被后台封禁')
							setTimeout(()=>{
								uni.reLaunch({
									url: '../home/home',
								});
							}, 200)
			              }
			            } else {
			              console.log('提示：用户没有勾选订阅消息或者没有状态')
			              that.dingyueComfirm(tmplId)
			            }
			          } else {
			            console.log('提示：订阅消息主开关没打开')
			            that.dingyueComfirm(tmplId)
			          }
			        }
			      })
			 },
			// 订阅信息
			dingyueComfirm: function(tmplId) {
			      uni.showModal({
			        title: '订阅消息',
			        content: '请同意我们给您推送信息，以便接受到账提醒。',
			        success: res => {
			          if (res.confirm) {
			            uni.requestSubscribeMessage({
			              tmplIds: [tmplId],
			              success: res => {
			                if (res[tmplId] === 'accept') {
			                  uni.showToast({
			                    title: '订阅成功！',
			                    icon: 'success'
			                  })
			                } else if (res[tmplId] == 'reject') {
			                  //引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
			                  uni.showModal({
			                    title: '订阅消息',
			                    content: '您当前拒绝接受消息通知，是否去开启',
			                    confirmText: '开启授权',
			                    confirmColor: '#345391',
			                    cancelText: '仍然拒绝',
			                    cancelColor: '#999999',
			                    success(res) {
			                      if (res.confirm) {
			                        console.log('用户点击确定')
			                        uni.openSetting({
			                          success(res) {
			                            console.log(res.authSetting)
			                          },
			                          fail(err) {
			                            //失败
			                            console.log(err)
			                          }
			                        })
			                      } else if (res.cancel) {
			                        console.log('用户点击取消')
			                      }
			                    }
			                  })
			                }
							setTimeout(()=>{
								uni.reLaunch({
									url: '../home/home',
								});
							}, 200)
			              },
			              fail(err) {
			                //失败
			                console.log(err)
			              }
			            })
			          }else if(res.cancel){
						  setTimeout(()=>{
						  	uni.reLaunch({
						  		url: '../home/home',
						  	});
						  }, 200)
					  }
			        }
			      })
			 },
			...mapMutations(['login','setToken']),
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/* .action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	} */
	.input-row{
		padding: 15px 0;
	}
	.logo{
		width: 206upx;
		height: 244upx;
	}
</style>